<%--
  Created by IntelliJ IDEA.
  User: 86188
  Date: 2025/3/25
  Time: 12:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"
          integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
          crossorigin="anonymous"></script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>密码修改 - 学生考勤系统</title>

  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/ChangePassword.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/common.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

</head>
<body>
<div class="security-container">
  <div class="security-card">
    <div class="card-header">
      <h2>
        <i class="fas fa-shield-alt"></i>
        修改登录密码
      </h2>
    </div>

    <form class="password-form">
      <!-- 在<form>标签内添加 -->
      <input type="hidden" id="hiddenUsername" name="username" value="${sessionScope.username}">

      <!-- 当前密码 -->
      <div class="form-group">
        <label>当前密码</label>
        <div class="input-with-icon">
          <i class="fas fa-lock"></i>
          <input type="password"
                 class="styled-input"
                 placeholder="输入当前密码"
                 required
                >
        </div>
      </div>

      <!-- 新密码 -->
      <div class="form-group">
        <label>新密码</label>
        <div class="input-with-icon">
          <i class="fas fa-key"></i>
          <input type="password"
                 id="newPassword"
                 class="styled-input"
                 required
                >
        </div>
        <div class="password-strength">
          <span>强度：</span>
          <div class="strength-bar">
            <span id="strengthIndicator"></span>
          </div>
        </div>
      </div>

      <!-- 确认密码 -->
      <div class="form-group">
        <label>确认新密码</label>
        <div class="input-with-icon">
          <i class="fas fa-redo"></i>
          <input type="password"
                 class="styled-input"
                 placeholder="再次输入新密码"
                 required>
        </div>
      </div>

      <div class="form-actions">
        <button type="submit" class="btn-submit">
          <i class="fas fa-check-circle"></i>
          确认修改
        </button>
        <button type="button"
                class="btn-cancel"
                onclick="window.history.back()">
          <i class="fas fa-times-circle"></i>
          取消修改
        </button>
      </div>
    </form>
  </div>
</div>


<script src="${pageContext.request.contextPath}/static/js/ChangePassword.js">
</script>
<script src="${pageContext.request.contextPath}/static/js/common.js"></script>
</body>

</html>

